<template>
  <div>
    <van-nav-bar title="发布房源" class="title" left-arrow @click-left="onClickLeft" :fixed="true" />
    <van-form @submit="onSubmit">
      <van-field label="房源信息" />
      <van-cell is-link title="小区名称" @click="onSelect" label="请输入小区名称" />
      <div class="box1">
        <van-field v-model="price" label="租金" placeholder="请输入租金/月" name="price"></van-field>
        <span class="span">￥/月</span>
      </div>
      <div class="box1">
        <van-field v-model="size" label="建筑面积" placeholder="请输入建筑面积" name="size"></van-field>
        <span class="span">㎡</span>
      </div>
      <div class="box2">
        <van-cell is-link @click="showPopup1">
          <span>户</span>型
        </van-cell>
        <van-popup v-model="show1" position="bottom" v-if="isShow1">
          <van-picker
            show-toolbar
            :columns="columns1"
            ref="item1"
            @confirm="onConfirm1"
            @click="showPopup1"
          />
        </van-popup>
        <span class="span" ref="span1">请选择</span>
      </div>
      <div class="box2">
        <van-cell is-link @click="showPopup2">
          <span>所在楼层</span>
        </van-cell>
        <van-popup v-model="show2" position="bottom" v-if="isShow2">
          <van-picker
            show-toolbar
            :columns="columns2"
            ref="item2"
            @confirm="onConfirm2"
            @click="showPopup2"
          />
        </van-popup>
        <span class="span" ref="span2">请选择</span>
      </div>
      <div class="box2">
        <van-cell is-link @click="showPopup3">
          <span>朝</span>向
        </van-cell>
        <van-popup v-model="show3" position="bottom" v-if="isShow3">
          <van-picker
            show-toolbar
            :columns="columns3"
            ref="item3"
            @confirm="onConfirm3"
            @click="showPopup3"
          />
        </van-popup>
        <span class="span" ref="span3">请选择</span>
      </div>
      <div class="box3">
        <h5>房屋标题</h5>
        <van-cell-group>
          <van-field v-model="value" placeholder="请输入标题（例如：整租 小区名 2室 5000元）" name="title" />
        </van-cell-group>
      </div>
      <div class="box4">
        <h5>房屋图像</h5>
        <van-field name="fileList">
          <template #input>
            <van-uploader v-model="fileList" multiple :after-read="afterRead" />
          </template>
        </van-field>
      </div>
      <div class="box5">
        <h5>房屋配置</h5>
        <van-grid :column-num="5" :border="false">
          <van-grid-item class="iconfont icon-yigui-hui" text="衣柜" @click="add($event)" ref="van" />
          <van-grid-item class="iconfont icon-xiyiji" text="洗衣机" @click="add($event)" />
          <van-grid-item class="iconfont icon-kongdiao" text="空调" @click="add($event)" />
          <van-grid-item class="iconfont icon-meiqitianranqi" text="天然气" @click="add($event)" />
          <van-grid-item class="iconfont icon-bingxiang" text="冰箱" @click="add($event)" />
          <van-grid-item class="iconfont icon-nuanqi" text="暖气" @click="add($event)" />
          <van-grid-item class="iconfont icon-dianshi" text="电视" @click="add($event)" />
          <van-grid-item
            class="iconfont icon-xianxinglongtouhuasa"
            text="热水器"
            @click="add($event)"
          />
          <van-grid-item class="iconfont icon-gaosukuandai_huaban1" text="宽带" @click="add($event)" />
          <van-grid-item class="iconfont icon-shafa" text="沙发" @click="add($event)" />
        </van-grid>
      </div>
      <div class="box6">
        <div class="div">
          <div class="div1">
            <h5>房屋描述</h5>
          </div>
          <van-field
            v-model="description"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入房屋描述信息"
            show-word-limit
            style="height: 128px;"
            name="description"
          />
        </div>
      </div>
      <div class="action">
        <van-button>取消</van-button>
        <van-button type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-dialog v-model="show4" title="标题" confirm-button-text ='继续发布' cancel-button-text ='去查看'>
  <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
  </div>
</template>
<script>
import { getcondition, pusthouse } from '@/api/map'
import { image } from '@/api/houses'
export default {
  name: 'VueHaowuGoshoping',
  data () {
    return {
      price: '',
      size: '',
      value: '',
      description: '',
      showPicker: true,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      isShow1: true,
      isShow2: true,
      isShow3: true,
      utr: '',
      supporting: [],
      list: [],
      columns1: [],
      columns2: [],
      columns3: [],
      roomType: '',
      floor: '',
      oriented: '',
      url: '',
      fileList: [],
      houseImg: ''
    }
  },
  created () {
    this.getConition()
  },
  methods: {
    add (e) {
      // console.log(e.target.innerText)
      this.utr = e.target.classList[2]
      if (this.utr === undefined) {
        e.target.classList.add('utr')
        this.supporting.push(e.target.innerText)
        // console.log(this.supporting)
        this.supporting = Array.from(new Set(this.supporting))
        console.log(this.supporting)
      } else {
        e.target.classList.remove('utr')
      }
    },
    async getConition () {
      let city = ''
      if (city === '') {
        const hot = JSON.parse(localStorage.getItem('hot'))
        city = hot.value
      } else {
        const hot = JSON.parse(localStorage.getItem('hotlist'))
        hot.forEach((item) => {
          city = item.value
        })
      }
      const res = await getcondition({
        id: city
      })
      this.columns1 = res.body.roomType.map((item) => item.label)
      this.columns2 = res.body.floor.map((item) => item.label)
      this.columns3 = res.body.oriented.map((item) => item.label)
      this.list.push(
        ...res.body.roomType,
        ...res.body.floor,
        ...res.body.oriented
      )
      // console.log(this.list)
    },
    onClickLeft () {
      this.$router.back()
    },
    async onSubmit (val) {
      // console.log(1)
      val.fileList.forEach((item) => {
        this.url = item.content
        console.log(this.url)
      })
      // eslint-disable-next-line no-useless-escape
      const yyy = JSON.stringify(this.supporting)
        .replace('[', '')
        .replace(']', '')
        // eslint-disable-next-line no-useless-escape
        .replace(/\"/g, '')
      console.log(yyy)
      const res = await pusthouse({
        community: '',
        description: val.description,
        floor: this.floor,
        houseImg: this.houseImg,
        oriented: this.oriented,
        price: val.price,
        title: val.title,
        roomType: this.roomType,
        size: val.size,
        supporting: yyy,
        tempSlides: {
          file: {},
          orientaion: 1,
          url: this.url
        }
      })
      this.$dialog.confirm({
        title: '提示',
        message: '房源发布成功',
        confirmButtonColor: 'blue'
      })
        .then(() => {
          // on confirm
          this.$toast.success('发布成功')
        })
        .catch(() => {
          // on cancel
        })

      console.log(res)
    },
    onSelect () {
      console.log(1)
    },
    onConfirm1 (val) {
      console.log(val)
      // eslint-disable-next-line array-callback-return
      this.list.filter((item) => {
        if (item.label === val) {
          this.roomType = item.value
          return item.value
        }
      })
      console.log(this.roomType)
      this.$refs.span1.innerHTML = val
      this.isShow1 = !this.isShow1
    },
    onConfirm2 (val) {
      console.log(val)
      // eslint-disable-next-line array-callback-return
      this.list.filter((item) => {
        if (item.label === val) {
          this.floor = item.value
          return item.value
        }
      })
      console.log(this.floor)
      this.$refs.span2.innerHTML = val
      this.isShow2 = !this.isShow2
    },
    onConfirm3 (val) {
      console.log(val)
      // eslint-disable-next-line array-callback-return
      this.list.filter((item) => {
        if (item.label === val) {
          this.oriented = item.value
          return item.value
        }
      })
      console.log(this.oriented)
      this.$refs.span3.innerHTML = val
      this.isShow3 = !this.isShow3
    },
    showPopup1 () {
      this.show1 = true
      this.isShow1 = true
    },
    showPopup2 () {
      this.show2 = true
      this.isShow2 = true
    },
    showPopup3 () {
      this.show3 = true
      this.isShow3 = true
    },
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      const res = await image(file.file)
      console.log(res.body)
      this.houseImg = res.body[0]
      // console.log(file)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
  .van-nav-bar__left {
    .van-icon {
      color: #fff;
    }
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
/deep/ .van-form {
  margin-top: 45px;
  border-bottom: 1px solid #f2f2f2;
  .van-field__label {
    span {
      color: #21b97a;
      font-size: 15px;
    }
  }
}
/deep/ .van-cell__title {
  .van-cell__label {
    font-size: 14px;
    width: 98px;
    margin-left: 220px;
    margin-top: -20px;
  }
}
/deep/ .box1 {
  position: relative;
  span {
    color: #323233 !important;
  }
  .span {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 10px;
    margin-right: 20px;
    font-weight: 400;
    color: #888 !important;
  }
}
.box2 {
  position: relative;
  /deep/ .van-cell__value {
    span {
      margin-right: 18px !important;
    }
  }
  .span {
    position: absolute;
    top: 0;
    right: 0;
    color: #888 !important;
    margin-right: 38px;
    margin-top: 10px;
  }
}
.box5 {
  h5 {
    margin-bottom: 10px;
  }
  .iconfont {
    text-align: center;
    font-size: 28px;
    margin-top: 8px;
  }
  /deep/.van-grid-item__text {
    font-size: 14px;
    color: #333333;
    margin-top: -20px;
  }
}
h5 {
  margin-left: 10px;
  font-weight: 400;
  color: #323233 !important;
}
.box6 {
  background-color: #f6f5f6;
  margin-top: 40px;
  .div {
    .div1 {
      margin-top: -10px;
    }
  }
}
.action {
  display: flex;
  width: 100%;
  button {
    flex: 1;
  }
}
/deep/ .van-popup__close-icon {
  opacity: 0;
}
/deep/.utr {
  border: 1px solid #21b97a;
  background-color: #21b97a;
  .van-grid-item__content {
    background-color: #21b97a;
  }
}
</style>
